<template>
	<view class="">
		<view v-if="!isStore" class="topTxt bgw">
			<p class="title">
				填完信息即刻开店
			</p>
			<p class="txt">
				距离开店营业只差这一步啦！
			</p>
		</view>
		<view class="main p30 bgw ">
			<view @tap="uploadImg('headImg')" class="txt1 bb">
				<view class="fl">店铺头像</view>
				<view class="fr">
					<image v-if="!parameret.headImg" class="dianLogo" src="../../static/image/dianLogo.png" mode=""></image>
					<image v-if="parameret.headImg" class="dianLogo" :src="parameret.headImg" mode=""></image>
					<image class="go" src="../../static/image/go.png" mode=""></image>
				</view>
			</view>
			<view class="txt2 bb">
				<view class="fl">店铺名称</view>
				<view class="fr">
					<input v-model="parameret.name" maxlength="15" placeholder="给店铺起个名字吧！" type="text" />
				</view>
			</view>
			<view class="txt2 bb">
				<view class="fl">店铺类别</view>
				<view class="fr">
					<picker :range="sortList" range-key="name" @change="sortSlect">
						<input v-model="parameret.storeName" placeholder="点击选择" disabled></input> 
					<image class="go" src="../../static/image/go.png" mode=""></image>
					</picker>
				</view>
			</view>
			<view class="txt2 bb">
				<view class="fl">店铺联系人</view>
				<view class="fr">
					<input v-model="parameret.contact" maxlength="10" placeholder="请填写店铺联系人姓名" type="text" value="" />
				</view>
			</view>
			<view class="txt2 bb">
				<view class="fl">店铺联系电话</view>
				<view class="fr">
					<input v-model="parameret.mobile" maxlength="11" placeholder="请填写店铺联系电话" type="number" value="" />
				</view>
			</view>
			<view class="txt2 bb">
				<view class="fl">开始营业</view>
				<view class="fr">
					<picker mode="time" :value="parameret.startDate" start="00:00" end="23:59" @change="staretime">
						<input v-model="parameret.startDate" placeholder="请选择开始营业时间" disabled></input>
					</picker>
				</view>
			</view>
			<view class="txt2 bb">
				<view class="fl">结束营业</view>
				<view class="fr">
					<picker mode="time" :value="parameret.endDate" start="09:01" end="21:01" @change="endtime">
						<input v-model="parameret.endDate" placeholder="请选择结束营业时间" disabled></input>
					</picker>
				</view>
			</view>
			<view class="txt2">
				<view class="fl">起送价格</view>
				<view class="fr">
					<input v-model="parameret.startingPrice" type="number" placeholder="请填写起送价格" value="" />
				</view>
			</view>
		</view>
		<view class="main p30 mt26 bgw">
			<view @tap="go('../mapSet/mapSet')" class="txt2">
				<view class="fl">店铺地址</view>
				<view v-if="!parameret.address" class="fr">
					<input v-model="parameret.address" type="text" placeholder="选择地址" value="" disabled/>
				</view>
				<view v-if="parameret.address" style="padding-top: 20rpx;" class="fr">
					{{parameret.address}}
				</view>
			</view>
		</view>
		<view class="main mt26 bgw p30"> 
			<view class="txt2">
				<view class="fl">店铺门脸照+店内照片（按顺序添加）</view>
			</view>
			<view class="imgs bb">
				<view v-if="parameret.detailImgs ==''|| parameret.detailImgs.length < 2 " @tap="uploadImg('detailImgs')">
					<image src="../../static/image/addimgShop.png" mode=""></image>
				</view>
				<view v-for="(v,i) in parameret.detailImgs" :key="i" @tap="removeDetailImgs(i)">
					<image :src="v" mode=""></image>
					<image class="delectImg" src="../../static/image/shanchu@2x.png" mode=""></image>
				</view> 
			</view>
			<view class="txt2">
				<view class="fl">店铺法人身份证正面照片</view>
			</view>
			<view class="imgs bb">
				<view v-if="!parameret.idcardFrontImg" @tap="uploadImg('idcardFrontImg')">
					<image src="../../static/image/addimgShop.png" mode=""></image>
				</view>
				<view v-if="parameret.idcardFrontImg" >
					<image :src="parameret.idcardFrontImg" mode=""></image>
					<image  @tap="parameret.idcardFrontImg = '' " class="delectImg" src="../../static/image/shanchu@2x.png" mode=""></image>
				</view>
			</view>
			<view class="txt2">
				<view class="fl">店铺法人身份证反面照片</view>
			</view>
			<view class="imgs bb"> 
				<view v-if="!parameret.idcardBehindImg" @tap="uploadImg('idcardBehindImg')">
					<image src="../../static/image/addimgShop.png" mode=""></image>
				</view>
				<view v-if="parameret.idcardBehindImg" >
					<image :src="parameret.idcardBehindImg" mode=""></image>
					<image @tap="parameret.idcardBehindImg = ''" src="../../static/image/shanchu@2x.png" class="delectImg" mode=""></image>
				</view>
			</view>
			<view class="txt2">
				<view class="fl">店铺营业执照</view>
			</view>
			<view class="imgs "> 
				<view v-if="!parameret.licenceImg" @tap="uploadImg('licenceImg')">
					<image src="../../static/image/addimgShop.png" mode=""></image>
				</view>
				<view v-if="parameret.licenceImg" >
					<image :src="parameret.licenceImg" mode=""></image>
					<image @tap="parameret.licenceImg = ''" src="../../static/image/shanchu@2x.png" class="delectImg" mode=""></image>
				</view>
			</view>
		</view>

		<u-button @tap="checking()" class="addBtn" type="success">提交店铺信息</u-button>

	</view>
</template>

<script>
	import {
		createStore,storeCategory,storePersonalStore,storeUpdate
	} from '../../api/api.js'
	import{url1} from '@/api/common.js'
	export default {
		data() {
			return {
				isStore:false,
				sortList:[],
				parameret: { 
					name: '',
					contact: '',
					mobile: '',
					startDate: '',
					endDate: '',
					startingPrice: 0,
					address: '',
					longitude: '',
					latitude: '',
					licenceImg: '',
					idcardFrontImg: '',
					idcardBehindImg: '',
					detailImgs: [],
					headImg: '',
					storeName:'',
					storeCategoryId: ''
				}
			};
		},
		onLoad(e) { 
			this.init()
			if(e.isStore){ 
				setTimeout(()=>{
					uni.setNavigationBarColor({
						frontColor: '#000000',
						backgroundColor: '#ffffff',
					})
				},200)
				uni.setNavigationBarTitle({
					title:'店铺资料'
				})
				this.isStore = e.isStore
				this.store()
			}
		},
		onShow() {
			let locationsLtLg = uni.getStorageSync('locationsLtLg') 
			if (locationsLtLg) { 
				this.parameret.address = uni.getStorageSync('locationsTxt')
				this.parameret.longitude = locationsLtLg.longitude
				this.parameret.latitude = locationsLtLg.latitude
			}  
		},
		methods: {
			async store(){
				let data = await storePersonalStore()
				data = data.data 
				this.parameret.name = data.name
				this.parameret.contact = data.contact
				this.parameret.mobile = data.mobile
				this.parameret.startDate = data.startDate 
				this.parameret.endDate = data.endDate
				this.parameret.startingPrice = data.startingPrice
				this.parameret.address = data.address
				this.parameret.longitude = data.longitude
				this.parameret.latitude = data.latitude
				this.parameret.licenceImg = data.licenceImg
				this.parameret.idcardFrontImg = data.idcardFrontImg 
				this.parameret.idcardBehindImg = data.idcardBehindImg
				this.parameret.detailImgs = data.detailImgs
				this.parameret.headImg = data.headImg
				this.parameret.storeName = data.category.name  
				this.parameret.storeCategoryId = data.category.id  
				this.parameret.id = data.id
			},
			async init(){
				let data = await storeCategory()
				this.sortList = data.data.content
			},
			removeDetailImgs(i){
				this.parameret.detailImgs.splice(i,1);
			},
			uploadImg(type) {
				uni.chooseImage({
					count: 1,
					success: res => {
						uni.showLoading({
							mask: true
						})
						let sum = res.tempFilePaths.length - 1;

						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: url1 + 'file/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: res => {
									let urls = res.data;
									urls = JSON.parse(urls); 
									if (type == 'licenceImg') {
										this.parameret.licenceImg = urls.url
									}
									if (type == 'idcardFrontImg') {
										this.parameret.idcardFrontImg = urls.url
									}
									if (type == 'idcardBehindImg') {
										this.parameret.idcardBehindImg = urls.url
									}
									if (type == 'detailImgs') {
										this.parameret.detailImgs.push(urls.url)
									}
									if (type == 'headImg') {
										this.parameret.headImg = urls.url
									} 
									uni.hideLoading()
								}
							});
						}
					},
					fail: err => {
						uni.hideLoading()
					}
				});
			},
			sortSlect(e) { 
				 e = e.detail.value 
				 this.parameret.storeCategoryId = this.sortList[e].id
				 this.parameret.storeName = this.sortList[e].name
			},
			staretime(e) {
				this.parameret.startDate = e.detail.value
			},
			endtime(e) {
				this.parameret.endDate = e.detail.value
			}, 
			checking() {
				for (let key in this.parameret) { 
					if (this.parameret[key] == '' || this.parameret[key] == 0) { 
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '资料填写不完整'
						})
						return
					} 
				}
				this.send()
			},
			async send() { 
				if(!this.isStore){
					//  创建 店铺
					let data = await createStore(this.parameret)
					if(data.code ==0){
						uni.redirectTo({
							url:'../type/type?state=shopCreate'
						})
					}
				}else{
					//  修改 店铺
					let datas = await storeUpdate(this.parameret)
					if(datas.code ==0){
						uni.redirectTo({
							url:'../type/type?state=storeUpdate'
						})
					}
				} 
			},
			go(url) {
				this.$navigateTo(url)
			}
		}
	}
</script>

<style lang="less" scoped>
	@import './index.less';
</style>
